<html>
    <head>
	<script src="jquery.js"></script>
	<script src="custom.js"></script>
	<style type="text/css">
	    #field {
		width: 600px;
		height: 480px;
		background-color: #007f00;
	    }
	    .card {
		width: 71px;
		height: 96px;
		background: url("cards/card_1.gif") center;
		float: left;
	    }
	    .card-field-bottom {
		width: 71px;
		height: 96px;
		position: relative;
	    }
	    .card-selected {
		width: 71px;
		height: 96px;
		position: relative;
		background-color: blue;
	    }
	    .field-column {
		margin-top: 2px;
		margin-left: 2px;
		width: 71px;
		height: 99%;
		float: left;
	    }
	    #my1 {
		margin-top: -81px;
	    }
	    
	</style>
    </head>
    <body>
	<p id="display">hello<input type="button" id="btn1" value="click" /></p>
	<div id="field">
	    <div class="field-column" id="col_1">
		<div class="card" ></div>
		<div class="card" style="margin-top: -81px"></div>
		<div class="card" id="card_1" style="margin-top: -81px"></div>
	    </div>
	    <div class="field-column" id="col_2">
		<div class="card" ></div>
		<div class="card" style="margin-top: -81px"></div>
		<div class="card" style="margin-top: -81px"></div>
	    </div>
	    <div class="field-column" id="col_3">
	    </div>
	    <div class="field-column" id="col_4">
	    </div>
	    <div class="field-column" id="col_5">
	    </div>
	    <div class="field-column" id="col_6">
	    </div>
	    <div class="field-column" id="col_7">
	    </div>
	    <div class="field-column" id="col_8">
	    </div>
	</div>
    </body>
</html>
